<!doctype html>
<html lang="en">
  <head>
    {% block title %}<title>本地图书馆</title>{% endblock %}
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Add additional CSS in static file -->
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/styles.css' %}" />
      <style>
        body {
            background-image: url("{% static 'images/background.jpg' %}");
            background-size: cover;       /* 覆盖整个页面 */
            background-attachment: fixed; /* 固定背景不滚动 */
            background-position: center;  /* 居中显示 */
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 1; /* 背景图50%透明 */
            z-index: -1;
        }
        .container {
            background-color: rgba(255, 255, 255, 0.85); /* 半透明白色背景，提高文字可读性 */
            padding: 20px;
            min-height: 100vh;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)
        }
    </style>
  </head>

  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-2">
          {% block sidebar %}
            <ul class="sidebar-nav">
              <li><a href="{% url 'index' %}">Home</a></li>
              <li><a href="{% url 'books' %}">All books</a></li>
              <li><a href="{% url 'author-list' %}">All authors</a></li>
              <li><a href="{% url 'genres' %}">All genres</a></li>
              <li><a href="{% url 'languages' %}">All languages</a></li>
              <li><a href="{% url 'bookinstances' %}">All bookinstances</a></li>
            </ul>
              {% if user.is_authenticated %}
              <li>User: {{ user.get_username }}</li>
            <li><a href="{% url 'my-borrowed' %}">My Borrowed</a></li>
            <li>
                <form id="logout-form" method="post" action="{% url 'logout' %}">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-link">Logout</button>
                </form>
            </li>
            {% else %}
              <li><a href="{% url 'login'%}?next={{request.path}}">Login</a></li>
            {% endif %}
            </ul>
            {% if user.is_staff %}
            <hr>
            <ul class="sidebar-nav">
                <li>Staff</li>
                <li><a href="{% url 'borrowed-books' %}">All borrowed</a></li>
                {% if perms.catalog.can_edit_author %}
                <li><a href="{% url 'author-create' %}">Create author</a></li>
                {% endif %}
                {% if perms.catalog.can_edit_book %}
                <li><a href="{% url 'book-create' %}">Create book</a></li>
                {% endif %}
            </ul>
            {% endif %}

          {% endblock %}
        </div>
        <div class="col-sm-10">
          {% block content %} {% endblock %}
          {% block pagination %}
            {% if is_paginated %}
               <div class="pagination">
                   <span class="page-links">
                       {% if page_obj.has_previous %}
                         <a href="{{ request.path }}?page={{ page_obj.previous_page_number }}">previous</a>
                       {% endif %}
                       <span class="page-current">
                           Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
                       </span>
                       {% if page_obj.has_next %}
                           <a href="{{ request.path }}?page={{ page_obj.next_page_number }}">next</a>
                       {% endif %}
                   </span>
               </div>
           {% endif %}
         {% endblock %}
        </div>
      </div>
    </div>
  </body>
</html>
